<template>
	<view class="one">
		<view class="nav">
			<!-- 基本信息板块 -->
			<view class="section-container">
				<view class="section-title">基本信息</view>
				<view class="form-group">
					<view class="form-item">
						<text class="label">负责人：</text>
						<input type="text" placeholder="" v-model="formData.manager" class="input" />
					</view>
					<view class="form-item">
						<text class="label">身份证号码：</text>
						<input type="text" placeholder="403652365412325263" v-model="formData.idCard" class="input" />
					</view>
					<view class="form-item">
						<text class="label">手机号：</text>
						<input type="text" placeholder="18893039203" v-model="phone" class="input" />
					</view>
					<view class="form-item verify-code-item">
						<text class="label">验证码：</text>
						<view class="verify-code-container">
							<input type="text" placeholder="输入验证码" v-model="formData.verifyCode" class="inputyzm verify-input" />
							<text class="verify-btn" 
								:class="{'disabled': !canGetCode}"
								@click="getVerifyCode">
								{{codeText}}
							</text>
						</view>
					</view>
					<view class="form-item">
						<text class="label">店名：</text>
						<input type="text" placeholder="大美汽修店" v-model="formData.shopName" class="input" />
					</view>
					<view class="form-item">
						<text class="label">工商营业执照号码：</text>
						<input type="text" placeholder="425233646747476464" v-model="formData.licenseNo" class="input" />
					</view>
					<view class="form-item">
						<text class="label">经营区域：</text>
						<view class="select-box" @click="showAreaPicker">
							<text :class="['select-text', !selectedArea && 'placeholder']">{{selectedArea || '焦作市山阳区'}}</text>
							<image src="/static/收起箭头小@3x.png" mode="aspectFit" class="arrow-icon"></image>
						</view>
					</view>
					<view class="form-item">
						<text class="label">地址：</text>
						<input type="text" placeholder="山阳区迎宾路32号" v-model="formData.address" class="input" />
					</view>
				</view>
			</view>

			<!-- 商家简介板块 -->
			<view class="section-container">
				<view class="section-title">商家简介</view>
				<textarea 
					class="intro-content" 
					placeholder="这里是简单的商家介绍这里是简单的商家介绍..."
					placeholder-style="color: #999;"
					v-model="formData.introduction"
				></textarea>
			</view>

			<!-- 身份证照片板块 -->
			<view class="section-container">
				<view class="section-title">身份证正反照片</view>
				<view class="photo-list">
					<view v-if="idCardFront" class="photo-item">
						<image :src="idCardFront" mode="aspectFill"></image>
						<view class="delete-icon" @click="deleteImage('idCardFront')">×</view>
					</view>
					<view v-if="!idCardFront" 
							class="photo-upload" 
							@click="chooseImage('idCardFront')">
						<text class="plus-icon">+</text>
						<text class="upload-text">上传照片</text>
					</view>
					<view v-if="idCardBack" class="photo-item">
						<image :src="idCardBack" mode="aspectFill"></image>
						<view class="delete-icon" @click="deleteImage('idCardBack')">×</view>
					</view>
					<view v-if="!idCardBack" 
							class="photo-upload" 
							@click="chooseImage('idCardBack')">
						<text class="plus-icon">+</text>
						<text class="upload-text">上传照片</text>
					</view>
				</view>
			</view>

			<!-- 营业执照板块 -->
			<view class="section-container">
				<view class="section-title">营业执照</view>
				<view class="photo-list">
					<view v-if="businessLicense" class="photo-item">
						<image :src="businessLicense" mode="aspectFill"></image>
						<view class="delete-icon" @click="deleteImage('businessLicense')">×</view>
					</view>
					<view v-if="!businessLicense" 
							class="photo-upload" 
							@click="chooseImage('businessLicense')">
						<text class="plus-icon">+</text>
						<text class="upload-text">上传照片</text>
					</view>
				</view>
			</view>

			<!-- 门店照片板块 -->
			<view class="section-container">
				<view class="section-title">门店照片</view>
				<view class="photo-list">
					<view v-for="(photo, index) in shopPhotos" :key="index" class="photo-item">
						<image :src="photo" mode="aspectFill"></image>
						<view class="delete-icon" @click="deleteImage('shopPhoto', index)">×</view>
					</view>
					<view v-if="shopPhotos.length < 6" 
							class="photo-upload" 
							@click="chooseImage('shopPhoto')">
						<text class="plus-icon">+</text>
						<text class="upload-text">上传照片</text>
					</view>
				</view>
				
			</view>
			<view class="section-container">
			<view class="section-title">营业时间</view>
			<view class="form-group">
				<view class="form-item">
					<text class="label">开始时间：</text>
					<view class="input-box">
						<picker 
							mode="time" 
							:value="startTime" 
							@change="onStartTimeChange"
						>
							<view class="picker-content">
								<text>{{startTime || '请选择开始时间'}}</text>
								<image src="/static/收起箭头小@3x.png" mode="aspectFit" class="arrow-icon"></image>
							</view>
						</picker>
					</view>
				</view>
				<view class="form-item">
					<text class="label">结束时间：</text>
					<view class="input-box">
						<picker 
							mode="time" 
							:value="endTime" 
							@change="onEndTimeChange"
						>
							<view class="picker-content">
								<text>{{endTime || '请选择结束时间'}}</text>
								<image src="/static/收起箭头小@3x.png" mode="aspectFit" class="arrow-icon"></image>
							</view>
						</picker>
					</view>
				</view>
			</view>
			</view>
			<view class="section-container">
			<view class="section-title">店铺状态</view>
			<view class="form-group">
				<view class="form-item status-item">
					<text class="label">营业状态：</text>
					<view class="status-switch" @click="toggleStatus">
						<text :class="['status-text', isOpen ? 'active' : '']">{{isOpen ? '营业中' : '放假中'}}</text>
						<view class="switch-track" :class="{'active': isOpen}">
							<view class="switch-thumb"></view>
						</view>
					</view>
				</view>
			</view>
			</view>
		</view>

		<!-- 保存按钮 -->
		<view class="save-btn" @click="saveForm">保存</view>
		<view class="sa"></view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				selectedArea: '',  // 选中的区域
				idCardFront: '', // 身份证正面
				idCardBack: '', // 身份证反面
				businessLicense: '', // 营业执照
				shopPhotos: [], // 改为数组存储多张门店照片
				canGetCode: true, // 是否可以获取验证码
				countdown: 60, // 倒计时秒数
				codeText: '获取验证码', // 按钮文字
				timer: null, // 定时器
				phone: '',
				formData: {
					manager: '', // 负责人
					idCard: '', // 身份证号码
					verifyCode: '', // 验证码
					shopName: '', // 店名
					licenseNo: '', // 营业执照号码
					address: '', // 地址
					introduction: '', // 商家简介
				},
				startTime: '08:00',
				endTime: '20:00',
				isOpen: true, // 店铺状态，true为营业中，false为放假
			}
		},
		methods: {
			showAreaPicker() {
				// 这里可以调用uni的picker组件或自定义的picker
				uni.showActionSheet({
					itemList: ['焦作市山阳区', '焦作市解放区', '焦作市中站区'],
					success: (res) => {
						this.selectedArea = ['焦作市山阳区', '焦作市解放区', '焦作市中站区'][res.tapIndex]
					}
				})
			},
			// 选择图片
			chooseImage(type) {
				if (type === 'shopPhoto') {
					// 门店照片可以选择多张
					const remainCount = 6 - this.shopPhotos.length;
					uni.chooseImage({
						count: remainCount,
						sizeType: ['compressed'],
						sourceType: ['album', 'camera'],
						success: (res) => {
							this.shopPhotos.push(...res.tempFilePaths);
							// 上传图片到服务器
							this.uploadImage(res.tempFilePaths, type);
						}
					});
				} else {
					// 其他类型的照片保持单张上传
					uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						sourceType: ['album', 'camera'],
						success: (res) => {
							const tempFilePath = res.tempFilePaths[0];
							switch(type) {
								case 'idCardFront':
									this.idCardFront = tempFilePath;
									break;
								case 'idCardBack':
									this.idCardBack = tempFilePath;
									break;
								case 'businessLicense':
									this.businessLicense = tempFilePath;
									break;
							}
							// 上传图片到服务器
							this.uploadImage([tempFilePath], type);
						}
					});
				}
			},

			// 上传图片 - 暂时注释掉，等后端接口ready后再实现
			uploadImage(filePath, type) {
				// 暂时不调用上传接口
				/*
				uni.showLoading({
					title: '上传中...'
				})
				
				uni.uploadFile({
					url: 'your_upload_url',
					filePath: filePath,
					name: 'file',
					formData: {
						type: type
					},
					success: (res) => {
						const data = JSON.parse(res.data)
						if(data.code === 0) {
							uni.showToast({
								title: '上传成功',
								icon: 'success'
							})
						} else {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							})
						}
					},
					fail: () => {
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						})
					},
					complete: () => {
						uni.hideLoading()
					}
				})
				*/
			},

			// 删除图片
			deleteImage(type, index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该图片吗？',
					success: (res) => {
						if(res.confirm) {
							if(type === 'shopPhoto') {
								// 删除指定索引的门店照片
								this.shopPhotos.splice(index, 1);
							} else {
								// 其他类型照片的处理保持不变
								switch(type) {
									case 'idCardFront':
										this.idCardFront = '';
										break;
									case 'idCardBack':
										this.idCardBack = '';
										break;
									case 'businessLicense':
										this.businessLicense = '';
										break;
								}
							}
						}
					}
				})
			},

			// 获取验证码
			getVerifyCode() {
				if (!this.canGetCode) return;
				
				// 检查手机号
				const phone = this.phone; // 假设你有一个phone字段存储手机号
				if (!phone || !/^1[3-9]\d{9}$/.test(phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}

				// 开始倒计时
				this.canGetCode = false;
				this.countdown = 60;
				this.codeText = `${this.countdown}s`;
				
				// 启动定时器
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
						this.codeText = `${this.countdown}s`;
					} else {
						this.resetVerifyCode();
					}
				}, 1000);

				// 调用发送验证码的接口
				// TODO: 这里添加发送验证码的接口调用
				uni.showToast({
					title: '验证码已发送',
					icon: 'success'
				});
			},

			// 重置验证码状态
			resetVerifyCode() {
				this.canGetCode = true;
				this.codeText = '获取验证码';
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},

			// 保存表单数据
			saveForm() {
				// 表单验证
				if (!this.formData.manager) {
					uni.showToast({
						title: '请输入负责人姓名',
						icon: 'none'
					});
					return;
				}
				if (!this.formData.idCard) {
					uni.showToast({
						title: '请输入身份证号码',
						icon: 'none'
					});
					return;
				}
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (!this.formData.verifyCode) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				if (!this.formData.shopName) {
					uni.showToast({
						title: '请输入店名',
						icon: 'none'
					});
					return;
				}
				if (!this.formData.licenseNo) {
					uni.showToast({
						title: '请输入营业执照号码',
						icon: 'none'
					});
					return;
				}
				if (!this.selectedArea) {
					uni.showToast({
						title: '请选择经营区域',
						icon: 'none'
					});
					return;
				}
				if (!this.formData.address) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					});
					return;
				}

				// TODO: 调用保存接口
				uni.showLoading({
					title: '保存中...'
				});

				// 模拟保存成功
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					});
				}, 1500);
			},
			onStartTimeChange(e) {
				this.startTime = e.detail.value;
			},
			onEndTimeChange(e) {
				this.endTime = e.detail.value;
			},
			toggleStatus() {
				this.isOpen = !this.isOpen;
			}
		},
		// 组件销毁时清除定时器
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		}
	}
</script>

<style>
page {
	background: #F7F7F7;
}

.one {
	padding-top: 20rpx;
	height: 200rpx;
	background-color: #2D80F9;
}

.nav {
	width: 680rpx;
	min-height: 80vh;
	margin: 0 auto;
	padding: 20rpx 20rpx 20rpx;
	background-color: transparent;
}

.section-container {
	background-color: #FFFFFF;
	border-radius: 20rpx;
	padding: 30rpx 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-container:last-of-type {
	margin-bottom: 40rpx;
}

.section-title {
	font-size: 32rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 30rpx;
	padding: 0 10rpx;
}

.section-title::before {
	display: none;
}

.photo-subtitle {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
	padding: 0 10rpx;
}

.form-group {
	margin-bottom: 30rpx;
	position: relative;
}

.form-item {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
	padding: 0 10rpx;
	position: relative;
}

.label {
	width: 220rpx;
	font-size: 28rpx;
	color: #333;
}

.input {
	flex: 1;
	height: 70rpx;
	font-size: 28rpx;
	color: #333;
	padding: 0 20rpx;
	background-color: #FFFFFF;
	border-radius: 35rpx;
	border: 2rpx solid #EEEEEE;
}
.inputyzm {
	flex: 1;
	height: 70rpx;
	font-size: 28rpx;
	color: #333;
	padding: 0 20rpx;
	background-color: #FFFFFF;
	border-radius: 35rpx ;
	border: 2rpx solid #EEEEEE;
}

.verify-code-item {
	margin-bottom: 30rpx;

}

.verify-code-container {
	
	flex: 1;
	display: flex;
	align-items: center;
	background-color: #FFFFFF;
	border-radius: 35rpx ;
	border: 2rpx solid #EEEEEE;
	padding-right: 10rpx;
}

.verify-input {
	flex: 1;
	background-color: transparent;
	border-right: none;
	margin-right: 0;
	position: relative;
}

.verify-input::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 2rpx;
	height: 40rpx;
	background-color: #EEEEEE;
}

.verify-btn {
	color: #2D80F9;
	font-size: 26rpx;
	padding: 0 30rpx;
	background: none;
	white-space: nowrap;
}

.verify-btn.disabled {
	color: #999;
	pointer-events: none;
}

.arrow-icon {
	width: 32rpx;
	height: 32rpx;
	position: absolute;
	right: 20rpx;
}

.intro-content {
	width: calc(100% - 40rpx);
	height: 200rpx;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	border: 2rpx solid #EEEEEE;
	padding: 20rpx;
	margin: 0 10rpx;
	font-size: 28rpx;
	color: #333;
	box-sizing: border-box;
}

.section-container .intro-content {
	display: block;
	max-width: 100%;
}

.photo-section {
	margin-top: 30rpx;
}

.photo-section:first-child {
	margin-top: 0;
}

.photo-list {
	display: flex;
	flex-wrap: wrap;
	gap: 30rpx;
	padding: 0 10rpx;
}

.photo-item {
	width: 180rpx;
	height: 180rpx;
	position: relative;
	border-radius: 12rpx;
	overflow: visible;
}

.photo-item image {
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
	object-fit: cover;
}

.delete-icon {
	position: absolute;
	top: -12rpx;
	right: -12rpx;
	width: 36rpx;
	height: 36rpx;
	line-height: 32rpx;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.6);
	color: #FFFFFF;
	border-radius: 50%;
	font-size: 32rpx;
	z-index: 1;
	padding-bottom: 2rpx;
}

.delete-icon:active {
	transform: scale(0.9);
	opacity: 0.8;
}

.photo-upload {
	width: 180rpx;
	height: 180rpx;
	background-color: #FFFFFF;
	border: 2rpx dashed #DDDDDD;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 15rpx;
}

.plus-icon {
	font-size: 60rpx;
	color: #999;
	line-height: 1;
	font-weight: 200;
}

.upload-text {
	font-size: 24rpx;
	color: #999;
}

.photo-upload:active {
	background-color: #F8F8F8;
	border-color: #CCCCCC;
}

.save-btn {
	width: 640rpx;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	background-color: #2D80F9;
	color: #FFFFFF;
	font-size: 32rpx;
	border-radius: 44rpx;
	margin: 0rpx auto;
	margin-bottom: 10rpx;
}
.sa{
	height: 10rpx;
}

.select-box {
	flex: 1;
	height: 70rpx;
	background-color: #FFFFFF;
	border-radius: 35rpx;
	border: 2rpx solid #EEEEEE;
	padding: 0 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.select-text {
	font-size: 28rpx;
	color: #333;
}

.placeholder {
	color: #999;
}

.arrow-icon {
	width: 32rpx;
	height: 32rpx;
	margin-left: 10rpx;
}

/* 移除不需要的样式 */
.photo-section {
	display: none;
}

.photo-subtitle {
	display: none;
}

/* 移除之前的图片相关样式 */
.photo-upload image {
	display: none;
}

.photo-upload::before,
.photo-upload::after {
	display: none;
}

.input-box {
	flex: 1;
	height: 70rpx;
	background-color: #FFFFFF;
	border-radius: 35rpx;
	border: 2rpx solid #EEEEEE;
}

.picker-content {
	height: 70rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	font-size: 28rpx;
	color: #333;
}

.picker-content .arrow-icon {
	width: 28rpx;
	height: 28rpx;
}

.status-item {
	padding: 0 20rpx;
}

.status-switch {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20rpx;
}

.status-text {
	font-size: 28rpx;
	color: #999;
}

.status-text.active {
	color: #2D80F9;
}

.switch-track {
	width: 100rpx;
	height: 52rpx;
	background-color: #EEEEEE;
	border-radius: 26rpx;
	position: relative;
	transition: all 0.3s;
}

.switch-track.active {
	background-color: #2D80F9;
}

.switch-thumb {
	width: 44rpx;
	height: 44rpx;
	background-color: #FFFFFF;
	border-radius: 22rpx;
	position: absolute;
	left: 4rpx;
	top: 4rpx;
	transition: all 0.3s;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.switch-track.active .switch-thumb {
	left: 52rpx;
}
</style>
